<template>
    <el-card>
        <el-row>
            <el-col :span="8">
                <span>关键词</span>
                <el-input v-model="search" size="small" placeholder="手机号/邮箱/会员昵称" />
            </el-col>
        </el-row>
        <el-table :data="filterTableData" style="width: 100%">

            <el-table-column prop="name" label="会员" width="200" />
            <el-table-column prop="city" label="会员等级" width="361" />
            <el-table-column prop="date" label="登录注册" width="361" />
            <el-table-column prop="state" label="状态" width="100">
                <el-switch v-model="value1" />
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template #default>
                    <el-button link type="primary" size="small">修改</el-button>
                    <el-button link type="primary" size="small" @click="handleClick">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup >
import { ref, computed } from 'vue'
const handleClick = () => {
    console.log('click')
}
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Home',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036',
        tag: 'Office',
    },
]
const value1 = ref(true)
</script>
<style scoped></style>